<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>知乎网站</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        .container-fluid {
            width: 800px;
            height: 51px;
            margin: auto;
            color: chartreuse;

        }

        .form-group .btn btn-default {
            background-color: blue;
        }

        .navbar-brand h2 {
            position: relative;
            bottom: 25px;
        }

        .nav navbar-nav l {
            display: block;

        }

        .nav navbar-nav l:hover {

            border-left: 10px solid green;
            position: relative;
        }

        .shenti {
            width: 760px;
            height: 720px;
            border: 1px dashed lightgray;
            margin: auto;

        }

        .bujian {
            width: 750px;
            height: 720px;
            background-color: white;
            margin: auto;
        }

        .bujian1 {
            position: absolute;
            width: 300px;
            height: 150px;
            left: 1140px;
            top: 50px;
            background-color: skyblue;

        }

        .bujian2 {
            position: absolute;
            width: 300px;
            height: 180px;
            left: 1140px;
            top: 220px;
            background-color: white;
            border:1px solid lightgray;

        }
        .bujian2 .b1{
            width: 300px;
            height: 60px;
            background-color: lightpink;
            border: 2px solid black;
            border-top: none;
            border-right: none;
            border-left: none;
        }
        .bujian2 .b2{
            width: 150px;
            height: 90px;
            position: absolute;
            top: 60px;
            left:0px;
            background-color: white;
            border: 1px dotted lightgray;
            border-left: none;
            float: left;
            
        }
        .bujian2 .b3{
            width: 150px;
            height: 90px;
            position: absolute;
            top: 60px;
            left:150px;
            background-color: white;
            border: 1px dotted lightgray;
            border-left: none;
            float: left;
            
        }
        .bujian2 .b4{
            width: 300px;
            height: 30px;
            position: absolute;
            top:150px;
            left:0px;
        }
        .bujian2 .b4 p{
            margin: auto;
            font-size: 15px;
            font-weight: lighter;
           font-family: 'Times New Roman', Times, serif;
        }
        .bujian2 .b2 p{
            font-size: 20px;
            width: 70px;
            margin:auto;
        }
        .bujian2 .b3 p{
            font-size: 20px;
            width: 70px;
            margin:auto;
        }

        .bujian3 {
            position: absolute;
            width: 300px;
            height: 300px;
            left: 1140px;
            top: 450px;
            border:1px solid black;

        }

        .bujian3 ul p{
            font-size: 19px;
            display: block;
            list-style: none;
        }
        .bujian3 .c1{
            width: 40px;
            height: 20px;
            position: absolute;
            left:250px;
            top:6px;
            background-color: lightgray;
           

        }
        .bujian3 .c1 h5{
          position: relative;
          top:-7px;
          left:7px;

        }
        .bujian3 .c2 h5{
          position: relative;
          top:-7px;
          left:7px;

        }
        .bujian3 .c3 h5{
          position: relative;
          top:-7px;
          left:7px;

        }
        .bujian3 .c2{
            width: 40px;
            height: 20px;
            position: absolute;
            left:250px;
            top:45px;
            background-color: lightgray;
           

        } 
        .bujian3 .c3{
            width: 40px;
            height: 20px;
            position: absolute;
            left:250px;
            top:85px;
            background-color: lightgray;
           

        }  

        .box1 {
            widows: 750px;
            height: 100px;
            background-color: skyblue;
            border-right: dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box2 {
            width: 750px;
            height: 100px;
            background-color: skyblue;
            border: 1px dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box3 {
            width: 750px;
            height: 100px;
            background-color: skyblue;
            border: 1px dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box4 {
            width: 750px;
            height: 100px;
            background-color: skyblue;
            border: 1px dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box5 {
            width: 750px;
            height: 100px;
            background-color: skyblue;
            border: 1px dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box6 {
            width: 750px;
            height: 100px;
            background-color: skyblue;
            border: 1px dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box7 {
            width: 750px;
            height: 100px;
            background-color: skyblue;
            border: 1px dotted lightslategray;
            border-left: none;
            border-right: none;
            border-bottom: none;

        }

        .box11 {
            width: 600px;
            height: 100px;
            float: left;

        }

        .box12 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;

        }

        .box21 {
            width: 600px;
            height: 100px;
            float: left;
        }

        .box22 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;


        }

        .box31 {
            width: 600px;
            height: 100px;
            float: left;
        }

        .box32 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;


        }

        .box41 {
            width: 600px;
            height: 100px;
            float: left;
        }

        .box42 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;


        }

        .box51 {
            width: 600px;
            height: 100px;
            float: left;
        }

        .box52 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;


        }

        .box61 {
            width: 600px;
            height: 100px;
            float: left;
        }

        .box62 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;


        }

        .box71 {
            width: 600px;
            height: 100px;
            float: left;
        }

        .box72 {
            width: 150px;
            height: 100px;
            float: right;
            position: relative;
            top: 10px;
            left: 20px;


        }

        .box21 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box11 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box31 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box41 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box51 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box61 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box71 h4 {
            position: relative;
            top: -10px;
            font-size: 20px;
            font-style: initial;
            font-weight: bold;
            color: black;
        }

        .box11 a {
            position: relative;
            top: -10px;
        }

        .box21 a {
            position: relative;
            top: -10px;
        }

        .box31 a {
            position: relative;
            top: -10px;
        }

        .box41 a {
            position: relative;
            top: -10px;
        }

        .box51 a {
            position: relative;
            top: -10px;
        }

        .box61 a {
            position: relative;
            top: -10px;
        }

        .box71 a {
            position: relative;
            top: -10px;
        }

        .box1 p {
            color: black;
        }

        .hhh {
            position: relative;
            width: 50px;
            height: 50px;
            top: -50px;
            left: 750px;
        }

        .hhh1 {
            position: relative;
            width: 50px;
            height: 50px;
            top: -45px;
            left: 800px;
        }
        .lindang{
            position: absolute;
            width: 43px;
            height: 50px;
            top:3px;
            left:1150px;
        }
        .photo{
            position: absolute;
            width: 42px;
            height: 45px;
            top:3px;
            left:1200px;
        }
        .tao{
            position: absolute;
            width: 51px;
            height: 47px;
            top:3px;
            left:1250px;
        }
        .bujian2 h4{
            position: absolute;
            top:8px;
            left:55px;
        }
    </style>

</head>

<body>
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <h2>知乎</h2>
            </a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">等你来答</a></li>
                <li><a href="#">热点排行</a></li>
                <li><a href="#">登录</a></li>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">提问</button>
                </form>
                </li>
                <div class="lindang">
                    <img src="images/kobe5.png">
                </div>
                <div class="photo">
                    <img src="images/k2.png">
                </div>
                <div class="tao">
                    <img src="images/tao.png">
                </div>
            </ul>
        </div>
    </div>
    <!--中间内容-->
    </div>
    <div class="shenti">
        <div class="bujian">
            <!--  第二个格子-->
            <div class="box1">
                <div class="box11">
                    <h4>1&emsp;科比遇难</h4>
                    <a href="https://new.qq.com/omn/20200127/20200127A033B800.html" target=_blank>
                        &emsp;据美国媒体报道，NBA传奇巨星科比-布莱恩特在一起直升机事故中去世。
                        NBA球星科比·布莱恩特在当地时间周日26号早晨，北京时间昨晚坠机遇难。同时遇难的还有他13岁的女儿。
                        科比是在加利福尼亚州洛杉矶县卡拉巴萨斯的一场直升机坠机事故中身亡的...
                    </a>
                </div>
                <div class="box12">
                    <img src="images/kobe.jpg">
                </div>
                <!--  第二个格子-->
            </div>
            <div class="box2">
                <div class="box21">
                    <h4>2&emsp;科比“手下败将”阵容：艾弗森、杜兰特上榜！霍华德被打服</h4>
                    <a href="https://k.sina.com.cn/article_6579532191_1882bb19f001014uh0.html?from=sports&subch=nba"
                        target=_blank>
                        &emsp;最近看乔丹的纪录片，令人热血沸腾，好像全世界都是乔丹的手下败将。
                        而科比作为乔丹继承人，他的手下败将也不少。近日知名美媒《SlamStudios》晒图：科比的“手下败将”阵容：其中艾弗森、
                        杜兰特均上榜，霍华德最后还是被打服了……
                    </a>

                </div>
                <div class="box22">
                    <img src="images/kobe1.jpg">
                </div>
                <!--
         第三个格子
        -->
            </div>
            <div class="box3">
                <div class="box31">
                    <h4>3&emsp;科比退役 巨星时代落幕</h4>
                    <a href="http://news.sina.com.cn/o/2016-04-14/doc-ifxriqqv5596701.shtml" target=_blank>
                        &emsp; 2016年4月14日，科比·布莱恩特，这个后乔丹时代最伟大的篮球巨星，将退出篮球江湖。
                        看着他打球长大变老的人们，都在等待这个时刻最终到来...
                    </a>
                </div>
                <div class="box32">
                    <img src="images/kobe3.jpg">
                    <!--第四个格子-->
                </div>
            </div>
            <div class="box4">
                <div class="box41">
                    <h4>4&emsp;科比81分的那个夜晚，究竟有多么疯狂？</h4>
                    <a href="https://sports.sina.cn/nba/2019-12-30/detail-iihnzahk0734943.d.html?cre=wappage&loc=3&mod=r&r=9&rfunc=33&tj=none"
                        target=_blank>
                        &emsp; 科比在这场比赛中达到了另一种境界，他在42分钟时间内，46投28中，命中率60.9%，三分球13中7，罚球20中18。当NBA官方为这一晚制作一部叫做《真实NBA》的纪录片时，
                        科比再次描述了当晚的感受...
                    </a>
                </div>
                <div class="box42">
                    <img src="images/kobe2.jpg">
                    <!--
                      第五个格子
                  -->
                </div>
            </div>
            <div class="box5">
                <div class="box51">
                    <h4>5&emsp;当年科比绝杀热火，韦德差点砸了科比的更衣室</h4>
                    <a href="https://sports.eastday.com/a/180615014553930000000.html" target=_blank>
                        &emsp; 科比在韦德头上绝杀热火，也是科比职业生涯经典绝杀镜头之一，当时韦德被绝杀赛后对科比的原话是：嘿，哥们，也就是你，换做其他人，我早就把他的更衣室砸了，
                        霸气的话语里透漏着无奈与尊重，如今两大后乔丹时代最伟大的两个分卫...
                    </a>
                </div>
                <div class="box52">
                    <img src="images/kobe5.jpg">
                </div>
            </div>
            <div class="box6">
                <div class="box61">
                    <h4>6&emsp;封神演绎：科比双绝杀太阳 8号的完美谢幕</h4>
                    <a href="https://nbachina.qq.com/a/20180717/028716.htm" target=_blank>
                        &emsp;在守住两个主场之后，科比成功帮助湖人在首轮取得了3-1的领先优势，距离晋级仅差一步之遥。但是这一步却太过遥远
                        ，顽强的太阳连扳三场，以4-3昂首杀入西部半决赛。而G3也成为了8号科比-布莱恩特完美的谢幕表演...
                    </a>
                </div>
                <div class="box62">
                    <img src="images/kobe6.jpg">
                </div>
            </div>
            <div class="box7">
                <div class="box71">
                    <h4>7&emsp;2010年科比夺冠，为何打绿军那么费劲？</h4>
                    <a href="https://sports.eastday.com/a/200203180906372000000.html" target=_blank>
                        &emsp;2010年NBA总决赛科比带领湖人队以4:3击败了凯尔特人队实现2连冠，科比也如愿以偿连庄总决赛MVP，
                        那么如日中天的科比为何打绿军那么费劲呢？从账面上看，那年的拜纳姆还没有烫头，已经是联盟数得着的好内线
                        ，加索尔还处于巅峰时期，慈世平是外线大闸...
                    </a>
                </div>
                <div class="box72">
                    <img src="images/kobe7.jpg">
                </div>
            </div>
        </div>
        <div class="bujian1">
            <img src="images/kk3.png">
        </div>
        <div class="bujian2">
            <box class="b1"><img src="images/k5.png"></box>
            <h4>创作者中心</h4>
            <box class="b2">
                <p>昨日被阅读数</p>
                <p>926</p>
            </box>
            <box class="b3">
                <p>昨日获赞数</p>
                <p>11</p>
            </box>
            <box class="b4">
                <p>瓦力保障为你的创作提供保障</p>
                
            </box>

        </div>
        <div class="bujian3">
            <div class="cc">
                <box class="c1">
                    <h5>24</h5>
                </box>
                <box class="c2">
                    <h5>8</h5>
                </box>
                <box class="c3">
                    <h5>24</h5>
                </box>
            </div>
            <ul>
                <p><image src="images/kobe55.png"><a href="">我的收藏</p>
                <p><image src="images/kobe55.png"></image><a href="">我关注的问题</p>
                <p><image src="images/kobe55.png"></image><a href="">我的邀请</p>
                <p><image src="images/kobe55.png"></image><a href="">我的余额</p>
                <p><image src="images/kobe55.png"></image><a href="">站务中心</p>
                <p><image src="images/kobe55.png"></image><a href="">帮助中心</p>
                <p><image src="images/kobe55.png"></image><a href="">版权服务中心</p>
                    
            </ul>
           
        </div>
    </div>
</body>

</html>